<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html{
            background-image: url(../static/images/Snipaste_2021-08-12_10-41-41.jpg);
            background-repeat: no-repeat;
            background-size: 100%;
        }
        input{
            width: 194px;
            height: 30px;
            margin-top: 30px;
            outline: 0;
            opacity: 0.7;
        }
        .register{
            margin-top: 100px;
        }
        .qihai{
            text-align: center;
        }
        button{
            border: 0;
            outline: 0;
            border-radius: 8px;
            width: 272px;
            height: 40px;
            margin-top: 20px;
            background-color: blue;
            color: white;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <h1 class="qihai register">欢迎光临七海注册</h1>
    <p  class="qihai">
        用户名&nbsp;&nbsp;<input type="text" id="username" placeholder="请输入您的用户名">
    </p>
    <p class="qihai">
        邮&nbsp;&nbsp; 箱&nbsp;&nbsp;&nbsp;<input type="text" id="email" placeholder="请输入您的邮箱">
    </p>
    <p class="qihai">
        密&nbsp;&nbsp; 码 &nbsp;&nbsp;<input type="password" id="password"placeholder="请输入您的密码">
    </p>
    <p class="qihai">
        <!-- confirmpassword确认密码 -->
        <span>确认密码</span><input type="password" id="confirmpassword"placeholder="密码和确认密码保持一致">
    </p>
    <p class="qihai">
        <button id="registerBtn">注册</button>
    </p>
    <p class="qihai">
        <button id="loginBtn" onclick="location.href='/login'">返回登录</button>
    </p>
</body>
<script src="/static/js/jquery.js"></script>
<script src="/static/plugins/layer/layer.js"></script>
<script>
    let isValidEmail = false;//邮箱禁用
    // 失去焦点校验邮箱是否已经有了
    $('#email').on('blur',function(){
        let email = $(this).val();
        if(!/^\w+@(?:\w+\.)+[a-zA-Z0-9]{2,6}$/.test(email)){
            layer.msg('邮箱格式非法')
            return;
        }
        email = encode(email);
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(this.readyState === 4 && this.status === 200){
                let data = JSON.parse(this.responseText)
                let {code,message} = data;
                layer.msg(message);
                if(code === 20000){
                    isValidEmail = true
                    layer.msg(message)
                }else{
                    isValidEmail = false;
                    layer.msg(message)
                }
            }
        }
        xhr.open('post','/ajaxemail',true)
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
        let formData = `email=${email}`
        xhr.send(formData)
    })
    // 注册事件
    $('#registerBtn').on('click', function () {
        //获取input里面的数据也就是值
        let username = $('#username').val();
        let email = $('#email').val();
        let password = $('#password').val();
        let confirmpassword = $('#confirmpassword').val();
    // 校验
    if([username,email,password,confirmpassword].includes('')){
        layer.msg('亲，请输入完整的注册数据，不可为空哦')
        return;
    }
    if(!/^\w+@(?:\w+\.)+[a-zA-Z]{2,6}$/.test(email)){
        layer.msg('邮箱格式非法')
        return;
    }
    if(password !== confirmpassword){
        layer.msg('浏览器-密码和确认密码不一致')
        return;
    }
    username = encode(username);
    email = encode(email);
    password = encode(password)
    confirmpassword = encode(confirmpassword)
    // 发送Ajax请求
    if(!isValidEmail){
        layer.msg('邮箱不可用')
        return;
    }
    $(this).prop('disabled',true).html('注册中...')
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(this.readyState ===4 && this.status ===200){
            $(this).prop('disabled',false).html('注册')
            let data = JSON.parse(this.responseText)
            let {code,message} = data;
            layer.msg(message);
            if(code === 20000){
                location.href='/login'
            //  console.log(this.responseText)
            }
        }
    }

    xhr.open('post','/ajaxregister',true)
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
    let formData =`username=${username}&email=${email}&password=${password}&confirmpassword=${confirmpassword}`;
    xhr.send(formData)
})
// 对数据编码
function encode(value){
    return encodeURIComponent(value)
}
</script>
</html>